<template>
  <div v-loading="loading" class="page-wrapper">
    <c-card title="资源列表" class="resource-list">
      <el-button slot="func" size="small" type="primary" class="item" @click="showAddDlg">添加</el-button>
      <div class="row">
        <c-search
          v-model="searchText"
          :height="30"
          :width="200"
          placeholder="名称搜索"
          class="item"
          @submit="_getResourceList"
        />
      </div>
      <el-table ref="table" :data="resourceList" stripe style="width: 100%">
        <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="code" label="编号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="mrType" label="类型" width="100">
          <template v-slot="{row}">{{ sourceList[row.mrType - 1] }}</template>
        </el-table-column>
        <el-table-column prop="path" label="路径" show-overflow-tooltip></el-table-column>
        <el-table-column prop="details" label="描述" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="150">
          <template v-slot="{row}">
            <el-button size="small" type="text" @click="showEditDlg(row)">编辑</el-button>
            <el-button size="small" type="text" @click="deleteResource(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :page-size="page.size"
          :current-page.sync="page.index"
          :total="page.total"
          @current-change="_getResourceList"
        ></el-pagination>
      </div>
    </c-card>
    <c-dlg :title="(resource.pkid ? '编辑' : '添加') + '资源'" :visible.sync="dialogVisible">
      <el-form
        ref="form"
        :rules="rules"
        :model="resource"
        label-width="60px"
        class="demo-ruleForm"
        label-position="top"
      >
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="资源名称" prop="name">
              <el-input v-model="resource.name" size="small"></el-input>
            </el-form-item>
          </div>
          <span class="spliter"></span>
          <div class="row-item">
            <el-form-item label="资源编码" prop="code">
              <el-input v-model="resource.code" size="small"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="资源类型" prop="mrType">
              <el-select v-model="resource.mrType" size="small">
                <el-option v-for="(s, i) in sourceList" :key="i" :label="s" :value="i+1"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <span class="spliter"></span>
          <div class="row-item">
            <el-form-item label="资源路径" prop="path">
              <el-input v-model="resource.path" size="small"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="form-row">
          <div class="row-item" style="flex: 1">
            <el-form-item label="描述" prop="details">
              <el-input v-model="resource.details" type="textarea" size="small"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button type="danger" size="small" @click="submitForm">提交</el-button>
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
      </div>
    </c-dlg>
  </div>
</template>

<script>
import CCard from "@/components/CCard";
import CDlg from "@/components/CDlg";
import CSearch from "@/components/CSearch";
import { clone } from "lodash";
import { calcPageNum } from "@/utils";
export default {
  name: "Resouce",
  components: {
    CCard,
    CDlg,
    CSearch
  },
  data() {
    return {
      searchText: "",
      loading: false,
      resourceList: [],
      page: {
        index: 1,
        size: 10,
        total: 0
      },
      dialogVisible: false,
      resource: { mrType: 1 },
      curResId: null,
      sourceList: ["url", "菜单", "按键"],
      rules: {
        name: [{ required: true, message: "请输入登录名", trigger: "blur" }],
        code: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        mrType: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        path: [{ required: true, message: "请输入用户名", trigger: "blur" }]
      }
    };
  },
  mounted() {
    const h = this.$refs["table"].$el.clientHeight;
    const n = calcPageNum(h);
    this.$set(this.page, "size", n);
    this._getResourceList();
  },
  methods: {
    _getResourceList() {
      const params = {
        name: this.searchText || "",
        rows: this.page.size,
        page: this.page.index
      };
      return this.$axios
        .get("plat/user/queryRes", { params })
        .then(res => {
          if (res.code === 1) {
            this.resourceList = res.data.rows;
            this.$set(this.page, "total", res.data.total);
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e))
        .finally(() => (this.loading = false));
    },
    showAddDlg() {
      this.dialogVisible = true;
      if (this.resource.pkid) {
        this.resource = {
          mrType: 1
        };
      }
    },
    showEditDlg(r) {
      this.dialogVisible = true;
      if (this.resource.pkid !== this.curResId) {
        this.curResId = r.pkid;
        this.resource = clone(r);
      }
    },
    deleteResource(r) {
      this.$confirm("确定删除", "提示").then(() => {
        return this.$axios
          .delete("plat/user/deleteRes", { params: { resIds: r.pkid } })
          .then(res => {
            if (res.code === 1) {
              this._getResourceList();
            } else {
              throw res.msg;
            }
          })
          .catch(e => this.$message.error(e));
      });
    },
    submitForm() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          const load = this.$loading();
          return this.$axios
            .post("plat/user/editRes", this.resource)
            .then(res => {
              if (res.code === 1) {
                this._getResourceList();
                this.resource === { mrType: 1 };
                this.dialogVisible = false;
              } else {
                throw res.msg;
              }
            })
            .catch(e => this.$message.error(e))
            .finally(() => load.close());
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.resource-list {
  text-align: left;
}
</style>
